<template>
      <div class="group_12 ">
                <div class="text-wrapper_6" >
                  <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/titlebg.svg" mode=""></image>
                  <div class='text-num' ><span class="text_14" >{{beforeWeight}}</span> <span class="text_15">kg</span></div>

                </div>
                <div class="group_13">
                  <div class="text-wrapper_7  ">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/titlebg.svg" mode=""></image>
                      <div class='text-num' >
                    <span class="text_16" >{{afterWeight}}</span>
                    <span class="text_17">kg</span>
                    </div>

                  </div>

                </div>
                <div class="group_14">
                  <!-- <div class="box_7 "></div> -->
                  <div class="box_8 "></div>
                  <div class="section_4"></div>
                </div>
              </div>

</template>

<script>
  export default {
    name:"home-arc",
    props:{
      afterWeight:'',
      beforeWeight:''
    },
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss" scoped>

.group_12 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 24rpx;
  z-index: 36;box-sizing: border-box;
  position: absolute;
  width:100%;
  height: 310rpx;
  // border: 2px solid rgba(0, 153, 119, 1);
}

.text-wrapper_6 {
  width: 108rpx;
  height: 64rpx;
  text-align: center;
  margin: 40rpx 0 0 45rpx;
  position: relative;
}
.text-wrapper_6 image,.text-wrapper_7 image{width: 108rpx;height:  66rpx;position: absolute;top: 5rpx;left: 0rpx;}
.text_14 {
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;margin-right: 5rpx;
  white-space: nowrap;font-weight: bold;
  line-height: 28rpx;
}
.text-num{position: absolute;top: 10rpx;width: 108rpx;text-align: center;}
.text_15 {
  color: rgba(255, 255, 255, 1);
  font-size: 20rpx;
  white-space: nowrap;
  line-height: 28rpx;
}

.group_13 {
    height: 146rpx;
    // background-image: url('@/static/img/grade/gradebner5.png')
  padding: 0 30rpx 10rpx;box-sizing: border-box;background-repeat: no-repeat;background-size: 100%;
  background-size: 100% 100%;
  position: relative;width:502rpx;
  margin: 2rpx auto 0rpx;
  background-image:url('@/static/img/home/story_bg.png');
}

.text-wrapper_7 {
  width: 108rpx;  position: absolute;
  height:64rpx;right:-50rpx;
  margin: 15rpx 0 0 0px;text-align: center;
}

.text_16 {
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;font-weight: bold;padding: 0 5rpx 0 0 ;
  white-space: nowrap;
}

.text_17 {
  color: rgba(255, 255, 255, 1);
  font-size: 20rpx;
  font-family: PingFangSC-Regular;
  text-align: right;
  white-space: nowrap;
  line-height: 28rpx;

}

.group_14 {
  z-index: 49;
  height: 146rpx;
  background-image:url('@/static/img/home/hubg.png');
  background-repeat: no-repeat;background-position:  0px -1px ;
  background-size:100% 100%;
  width: 502rpx;
  position: absolute;
  left: 94rpx;
  top:124rpx;
}

.box_7 {
  height: 90rpx;
  background: url() -1px -2px
    no-repeat;
  background-size:490rpx 96rpx;
  margin-left: 8rpx;
 margin-top: 0rpx;
}

.section_4 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  width: 16rpx;
  height: 16rpx;position: absolute;right: -10rpx;bottom: 37rpx;
  border: 2px solid rgba(0, 153, 119, 1);
}

.box_8 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  z-index: 51;
  position: absolute;
  left: -8rpx;
  top: -8rpx;
  width: 16rpx;
  height: 16rpx;
  border: 2px solid rgba(0, 153, 119, 1);
}

</style>
